<script lang="ts" setup>
  import { ref, onMounted,watch } from 'vue'
  const $emit = defineEmits(['update:modelValue','change'])
  const defaultIndex = ref([0])
  const props = defineProps({
    modelValue:{
      type:[String,Number],
      default:''
    },
    columns:{
      required:true,
      type:Array,
      default:[]
    },
    placeholder:{
      type:String,
      default: '请选择'
    },
    cascade:{
      type:Boolean,
      default:false
    },
    cascadeSplit:{
      type:String,
      default:'/'
    },
    map:{
      type:Object,
      default:{
        text:'name',
        value:'id'
      }
    },
	type: {
		type:String,
		default:'string'
	}
  })
  const pickerColumns = props.cascade ? ref<any[]>(props.columns) : ref<any[]>([props.columns])
  const pickerShow = ref(false)
  const pickerValue = ref('')
  onMounted(() => {
    if(props.columns.findIndex((item:any) => item.value === props.modelValue) > -1){
      const index = props.columns.findIndex((item:any) => item.value === props.modelValue)
      pickerValue.value = props.columns[index].text
      defaultIndex.value = [index]
    }
  })
  watch(() => [props.columns,props.modelValue],(newValue:any[]) => {
    pickerColumns.value = props.cascade ? newValue[0] : [newValue[0]]
    const index:number = props.columns.findIndex((item:any) => item.value == newValue[1])
    if(newValue[1] && index > -1){
      pickerValue.value = props.columns[index].text
      defaultIndex.value = [index]
    }
  })
  const pickerConfirm = (data:any) => {
    pickerValue.value = data.value[0].text
    $emit('update:modelValue', data.value[0].value)
	if (props.type === 'obj') {
		$emit('change', {value: data.value[0].value, text: data.value[0].text})
	} else {
		$emit('change', data.value[0].value)
	}
    pickerClose()
  }
  const pickerClose = () => {
    pickerShow.value = false
  }

  const handleClose = () => {
    pickerValue.value = ''
    $emit('update:modelValue', undefined)
  }
  const openPicker = () => {
    pickerShow.value = true
  }
  const cascadeChange = (e:any) => {
    pickerValue.value = e.detail.value.map((item:any) => {
      return item.text
    }).join(props.cascadeSplit)
    const ids = e.detail.value.map((item:any) => {
      return item.value
    }).join(',')
    $emit('update:modelValue', ids)
    $emit('change', {ids,idList:e.detail.value})
  }
</script>
<template>
  <view class="select-picker">
    <template v-if="!cascade">
      <view class="picker-value" :class="{placeholder:!pickerValue}">
        <view class="picker-text" @click="openPicker">{{ pickerValue ? pickerValue: placeholder }}</view>
        <view class="picker-close">
          <up-icon name="arrow-right" color="#a6a5a5" size="14"></up-icon>
        </view>
      </view>
      <up-picker :show="pickerShow" :defaultIndex="defaultIndex" :columns="pickerColumns" @cancel="pickerClose" @confirm="pickerConfirm"></up-picker>
    </template>
    <template v-else>
      <uni-data-picker :modelValue="modelValue" :localdata="pickerColumns" :map="map" v-slot:default="{data}" @change="cascadeChange">
        <view class="picker-value" :class="{placeholder:data.length == 0}">
          <view class="picker-text" @click="openPicker" v-if="data.length == 0">{{ placeholder }}</view>
          <view class="picker-text" @click="openPicker" v-else>
            <text v-for="(item,index) in data" :key="index">{{item.text}}{{index != data.length -1 ? '/' :''}}</text>
          </view>
          <view class="picker-close">
            <up-icon name="arrow-right" color="#a6a5a5" size="14"></up-icon>
          </view>
        </view>
      </uni-data-picker>
    </template>

  </view>
</template>
<style scoped lang="scss">
  .picker-value{
    background: #FFFFFF;
    border-radius: 10rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .picker-text{
      width: calc(100% - 24rpx);
      font-size: 28rpx;
    }
    &.placeholder{
      color: #a6a6a6;
    }
  }
</style>
